<template>
    <div class="main">
        <div class="bottom">
            <i class="el-icon-back"></i>
            <div class="back" @click="backToIndex()">返回首页</div>
        </div>
        <el-row>
            <el-col :span="14" :offset="5">
                <div class="content">
                    <div class="content-title">
                        问题反馈
                    </div>
                    <div class="content-form">
                        <el-form :model="tempform" :rules="rules" ref="tempform" label-position="left"
                            label-width="80px" class="demo-tempform">
                            <el-form-item label="问题描述" prop="message">
                                <el-input type="textarea" autosize placeholder="请输入内容" v-model="tempform.message">
                                </el-input>
                            </el-form-item>
                            <el-form-item label="上传图片" prop="uploadimg">
                                <el-upload :action="actionUrl" :auto-upload="true" list-type="picture-card"
                                    :on-success="handleSuccess" :limit="1" :on-exceed="handleExceed">
                                    <i slot="default" class="el-icon-plus"></i>
                                    <div slot="file" slot-scope="{file}">
                                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                        <span class="el-upload-list__item-actions">
                                            <span class="el-upload-list__item-preview"
                                                @click="handlePictureCardPreview(file)">
                                                <i class="el-icon-zoom-in"></i>
                                            </span>
                                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                                @click="handleDownload(file)">
                                                <i class="el-icon-download"></i>
                                            </span>
                                            <span v-if="!disabled" class="el-upload-list__item-delete"
                                                @click="handleRemove(file)">
                                                <i class="el-icon-delete"></i>
                                            </span>
                                        </span>
                                    </div>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible">
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog>
                            </el-form-item>
                            <el-form-item label="联系人" prop="name">
                                <el-input v-model="tempform.name" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="tempform.email" placeholder="请输入"></el-input>
                            </el-form-item>
                            <el-form-item style="margin-bottom:22px;padding-bootom:0;">
                                <el-button stype="margin-bottom: 20px;" type="primary" @click="submitForm('tempform')"
                                    :loading="submiting">提交
                                </el-button>
                                <el-button stype="margin-bottom: 20px;" @click="resetForm('tempform')">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { PostContactDetail } from "./../../api/contact"

export default {
    name: "Contactus",
    data() {
        return {
            baseUrl: null,
            actionUrl: null,
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            submiting: false,
            tempform: {
                message: '',
                name: '',
                email: '',
                uploadimgurl: null,
            },
            rules: {
                message: [{ required: true, message: "请输入问题描述", trigger: "blur" }],
                name: [{ required: true, message: "请输入联系人", trigger: "blur" }],
                email: [{ required: true, message: "请输入邮箱", trigger: "blur" },
                { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
            }
        }
    },
    created: function () {
        this.baseUrl = this.$store.state.Api.baseUrl;
        this.actionUrl = this.$store.state.Api.baseUrl + 'contact/img/';
    },
    methods: {
        backToIndex: function () {
            this.$router.back();
        },
        handleRemove(file) {
            console.log(file);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleDownload(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message(`限制选择 1 个文件`);
        },
        handleSuccess: function (res, file, fileList) {
            console.log(res);
            if (res.rescode != 200) {
                this.$message(res.msg);
            } else {
                // 这个是上传后的zip文件夹在服务端所在位置
                this.tempform.uploadimgurl = res.imgurl;
                this.tempform.uploadimgurl = this.tempform.uploadimgurl.replace(/\\/g, '/');
                this.fileList = fileList;
                console.log(this.tempform.uploadimgurl)
            }
        },
        submitForm(formName) {
            console.log(this.tempform)
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.submiting = true;
                    PostContactDetail({
                        detail: this.tempform.message,
                        person: this.tempform.name,
                        email: this.tempform.email,
                        imgurl: this.tempform.uploadimgurl
                    })
                        .then(res => {
                            if (res.rescode == 200) {
                                this.$message.success(`提交成功`);
                            }
                            this.submiting = false;
                            this.$refs[formName].resetFields();
                        })
                        .catch(err => {
                            this.submiting = false;
                            this.$message.error(`${err.msg}`);
                        })
                } else {
                    this.$message.error("请输入必填信息！");
                    this.submiting = false;
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
}
</script>

<style scoped>
.main {
    padding-top: 20px;
    width: 100%;
    height: 100%;
    min-width: 1000px;
}

.content {
    box-shadow: 2px 2px 10px #d3dce6;
    border-radius: 4px;
    background: #fff;
}

.content-title {
    color: #000000;
    vertical-align: middle;
    font-weight: 700;
    font-size: 1.3em;
    padding: 20px 0px;
}

.content-form {
    width: 70%;
    height: 100%;
    margin: 0 auto;
}

.bottom {
    display: flex;
    text-align: center;
}

.el-icon-back {
    font-size: 1.4em;
    font-weight: bold;
    padding-top: 2px;
    padding-left: 10px;
}

.el-button {
    margin-bottom: 100px;
}

.back {
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    padding-bottom: 20px;
}

button {
    margin-bottom: 20px;
}
</style>